<template>
	<page-meta :page-style="'overflow:'+(popShow?'hidden':'visible')"></page-meta>
	<view>
		<navBar navbarTitle="居家安全" showback bgColor="" backdrop="10px"></navBar>
		<view class="nav_bg"></view>
		<view class="container">
			<view class="radar_box">
				<view class="radar_title">居家安全雷达图</view>
				<!-- <view class="" id="echartsBox"></view> -->
				<canvas canvas-id="canvasRadar" id="canvasRadar" class="charts"></canvas>
			</view>

			<view class="radar_box medal_box">
				<view class="radar_title">居家安全勋章</view>
				<view class="cup_box">
					<image :src="`${$api.imgURL}/medal_1.png`" mode="widthFix" class="cup_img"></image>
					<view class="cup_title">
						<view class="title_left_box">
							<view class="left_big"></view>
							<view class="left_small"></view>
						</view>
						<text>荣耀之星</text>
						<view class="title_left_box title_right_box">
							<view class="right_big"></view>
							<view class="right_small"></view>
						</view>
					</view>
					<view class="cup_content">获得<text style="color: #FFED9D;">10</text>枚勋章后获得 </view>
					<view class="cup_border"></view>
				</view>
				<!-- 勋章列表 -->
				<!-- 需要引入uni-swiper-dot 组件 -->
				<view class="uni_swiper_box">
					<view class="ciropp" :style="{'left':`calc(${medalX}px)`,'opacity':`0`}" :animation="aniOpacity">
						{{medalCiropp}}
					</view>
					<uniSwiperDot :current="current" :dots-styles="dotsStyles" field="content" mode="round"
						@clickItem=clickItem :info="medalList">
						<swiper :interval="3000" :duration="1000" @change="change" :current="swiperDotIndex"
							class="uni_swiper">
							<swiper-item v-for="(item,index) in medalList" :key="index" class="uni_swiper_item">
								<view class="medal_list_box">
									<view class="medal_list" v-for="(it,key) in item.child" :key="key"
										@click="medalClick($event,it,key)">
										<!-- 已获得 -->
										<image :src="`${$api.imgURL}${it.isObtain==1?it.imgUrl:it.notImgUrl}`"
											mode="aspectFill" class="medal_icon">
										</image>
										<!-- 未获得 -->
										<view class="">{{it.name}}</view>
									</view>

								</view>
							</swiper-item>
						</swiper>
					</uniSwiperDot>
				</view>

				<!-- 游戏列表 -->
				<view class="">
					<view :class="['game_list',index==0?'first_list':'']" v-for="(item,index) in gameList" :key="index">
						<image :src="`${$api.imgURL}/what_icon.png`" mode="aspectFill"></image>
						<view class="game_title">
							<view class="game_title_text">
								<text>问答闯关</text>
								<image :src="`${$api.imgURL}/tip_icon.png`" mode="widthFix" @click="openClick(item)">
								</image>
							</view>
							<view class="game_desc_box">
								<view class="game_desc_type"> <text>安全新手</text> </view>
								<view class="game_desc_text">获得88颗星后升级</view>
							</view>
						</view>
						<view class="btn_box">
							<view class="">开始</view>
							<view class="">游戏</view>
						</view>
					</view>
				</view>
			</view>

		</view>

		<uni-popup ref="popup" type="center" border-radius="10px 10px 0 0" @change="popChange">
			<view class="pop_box">
				<image :src="`${$api.imgURL}/describe.png`" mode="widthFix" class="pop_title"></image>

				<view class="tab_box">
					<view :class="['tab_item',tabActive==0?'tabActive':'']" @click="tabClick(0)">科普知识</view>
					<view :class="['tab_item',tabActive==1?'tabActive':'']" @click="tabClick(1)">玩法介绍</view>
				</view>
				<image src="https://picsum.photos/id/237/400/400" mode="aspectFit" v-show="tabActive==0"
					class="tab_img" @click="previewImage"></image>
					
					<video src="http://vjs.zencdn.net/v/oceans.mp4"  controls v-show="tabActive==1" 
					class="tab_video"
					></video>
			</view>
			<view class="close_icon">
				<uni-icons type="close" size="40" color="#fff" @click="$refs.popup.close()"></uni-icons>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import uniSwiperDot from "@/uni_modules/uni-swiper-dot/components/uni-swiper-dot/uni-swiper-dot.vue"
	import uniPopup from "@/uni_modules/uni-popup/components/uni-popup/uni-popup.vue"
	// 图表
	import uCharts from "@/components/u-charts/u-charts.js";

	export default {
		components: {
			uniSwiperDot,
			uniPopup
		},
		data() {
			return {
				current: 0,
				swiperDotIndex: 0,
				dotsStyles: {
					width: 8,
					backgroundColor: "#FFED9D",
					selectedBackgroundColor: "#FBC22D",
					border: '0px rgba(0, 0, 0, 0) solid',
					selectedBorder: '0px rgba(0, 0, 0, 0) solid'
				},
				// 雷达图
				radar: {
					categories: ['记忆力\n100', '逻辑思维\n100', '知识储备\n3000', '反应速度\n5500', '注意力\n100', '视觉认知\n2100'],
					series: [{
						name: '熟悉度',
						data: [95, 88, 80, 60, 40, 95]
					}]
				},
				pixelRatio: 1,
				medalList: [{
						name: '速达先锋',
						imgUrl: '/medal_2.png',
						notImgUrl: '/opacity_icon.png',
						isObtain: 1,
					},
					{
						name: '速达先锋',
						imgUrl: '/medal_3.png',
						notImgUrl: '/opacity_icon.png',
						isObtain: 1,
					},
					{
						name: '安全鹰眼',
						imgUrl: '/medal_4.png',
						notImgUrl: '/opacity_icon.png',
						isObtain: 1,
					},
					{

						name: '安全鹰眼',
						imgUrl: '/medal_4.png',
						notImgUrl: '/opacity_icon.png',
						isObtain: 0,
					},
				],
				gameList: [{
						name: '问答闯关',
					},
					{
						name: '翻牌记忆',
					},
					{
						name: '步步为营',
					},
					{
						name: '寻找标识',
					},
					{
						name: '问答闯关',
					},
					{
						name: '分门别类',
					},
					{
						name: '安全侦探',
					},

				],
				medalX: null,
				medalCiropp: '',
				aniOpacity: '',
				timeout: null,
				tabActive: 0,
				popShow:false,
			}
		},
		onLoad() {
			this.cWidth = uni.upx2px(650);
			this.cHeight = uni.upx2px(516);
			this.showRadar("canvasRadar", this.radar);
			this.medalSortArr(this.medalList)
		},
		onReady() {},
		methods: {
	
			//预览图片
			 previewImage(index) {
			      uni.previewImage({
			        current:'https://picsum.photos/id/237/400/400' , // 当前预览的图片链接
			        urls: ['https://picsum.photos/id/237/400/400'], // 图片列表
			      });
			    },
			popChange(e) {
				this.popShow = e.show

			},
			tabClick(index) {
				this.tabActive = index
			},
			// 打开弹窗
			openClick() {
				this.$refs.popup.open()
			},
			// 点击勋章获取信息
			medalClick(e, item, index) {
				// 清除之前的动画逻辑
				if (this.timeout) {
					clearTimeout(this.timeout);
					this.timeout = null;
				}
				// console.warn(e, item, index)
				let that = this
				const query = uni.createSelectorQuery().in(that);
				that.medalCiropp = item.isObtain == 1 ? '2025年05月30日获得' : '获得7枚勋章后获得'
				setTimeout(() => {
					query.select('.ciropp').boundingClientRect((data) => {
						that.medalX = e.currentTarget.offsetLeft - data.width / 2.5
						var animation = uni.createAnimation({
							duration: 800,
							timingFunction: 'ease',
							delay: 0
						});
						animation.opacity(1).step();
						that.aniOpacity = animation.export()
						// 保存新的动画逻辑
						that.timeout = setTimeout(() => {
							animation.opacity(0).step();
							that.aniOpacity = animation.export()
							clearTimeout(that.timeout)
							that.timeout = null
						}, 2000)
					}).exec();
				}, 100)

			},
			change(e) {
				var animation = uni.createAnimation({
					duration: 100,
					timingFunction: 'ease',
				});
				animation.opacity(0).step();
				this.aniOpacity = animation.export()
				this.current = e.detail.current
			},
			clickItem(e) {
				this.swiperDotIndex = e
			},
			// 处理勋章数据
			medalSortArr(data) {
				//data
				this.medalList = data.reduce((result, item, index) => {
					const chunkIndex = Math.floor(index / 4);
					if (!result[chunkIndex]) {
						result[chunkIndex] = {
							child: []
						};
					}
					result[chunkIndex].child.push(item);
					return result;
				}, []);
			},
			// 雷达图
			showRadar(canvasId, chartData) {
				let _self = this
				var canvaRadar = new uCharts({
					$this: _self,
					canvasId: canvasId,
					type: 'radar',
					fontSize: 11,
					padding: [10, 10, 10, 10],
					legend: {
						show: false
					},
					colors: ['#FBC22D'],
					background: '#FFFFFF',
					pixelRatio: _self.pixelRatio,
					animation: true,
					dataLabel: true,
					categories: _self.radar.categories,
					series: _self.radar.series,
					width: _self.cWidth * _self.pixelRatio,
					height: _self.cHeight * _self.pixelRatio,
					extra: {
						radar: {
							max: 100, //雷达数值的最大值
							opacity: 0.6,
							labelColor: '#333333'
						}
					}
				});
			},
		}
	}
</script>

<style lang="scss">
	.nav_bg {
		width: 100%;
		height: 400rpx;
		position: fixed;
		top: 0;
		z-index: 0;
	}

	.nav_bg::after {
		width: 180%;
		height: 400rpx;
		position: absolute;
		left: -40%;
		top: 0;
		z-index: -1;
		content: '';
		border-radius: 0 0 50% 50%;
		background: #FBC22D;
	}

	.container {
		position: relative;
		z-index: 1;
		margin-top: 40rpx;
		overflow: auto;
	}

	.radar_box {
		box-shadow: 0rpx 4rpx 24rpx 0rpx rgba(112, 112, 112, 0.05);
		border-radius: 40rpx;
		width: 702rpx;
		height: 554rpx;
		box-sizing: border-box;
		padding: 30rpx 40rpx;
		background: #fff;
		margin: 0 auto;

		.radar_title {
			font-size: 36rpx;
		}

		.charts {
			width: 100%;
			height: 100%;
			box-sizing: border-box;
		}
	}

	.medal_box {
		margin: 36rpx auto;
		height: fit-content;

	}

	.cup_box {
		width: 326rpx;
		margin: 0 auto;
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 30rpx;

		.cup_img {
			width: 132rpx;
			height: 146rpx;
			position: relative;
			z-index: 1;
		}

		.cup_title {
			font-size: 26rpx;
			margin: 10rpx 0;
			margin-left: 5rpx;
			display: flex;
			justify-content: center;
			align-items: center;

			text {
				margin: 0 10rpx;
			}
		}

		.cup_content {
			font-size: 22rpx;
			color: #5E5E5E;
		}

		.cup_border {
			width: 326rpx;
			height: 222rpx;
			border-radius: 40rpx;
			border: 2rpx solid #FFED9D;
			position: absolute;
			top: 28rpx;
		}

		.title_left_box {
			display: flex;
			flex-direction: column;
			align-items: flex-end;
		}

		.left_big,
		.left_small {
			width: 32rpx;
			height: 5rpx;
			// background: #FBC22D;
			border-top: 10rpx solid #FBC22D;
			border-left: 10rpx solid transparent;
		}

		.left_small {
			width: 18rpx;
		}

		.title_right_box {
			align-items: flex-start;
		}

		.right_big,
		.right_small {
			width: 32rpx;
			height: 5rpx;
			border-top: 10rpx solid #FBC22D;
			border-right: 10rpx solid transparent;
		}

		.right_small {
			width: 18rpx;
		}
	}

	.uni_swiper_box {
		position: relative;
	}

	.uni_swiper {
		width: 622rpx;
		height: 200rpx;
		margin-top: 70rpx;
	}

	.uni_swiper_item {
		overflow: inherit !important;
		height: 200rpx;
	}


	.medal_list_box {
		width: 622rpx;
		display: flex;
		justify-content: space-evenly;
		position: absolute;
		bottom: 50rpx;
	}

	.medal_list {
		width: fit-content;
		display: flex;
		flex-direction: column;
		align-items: center;
		position: relative;

		view {
			font-size: 24rpx;
		}

		.medal_icon {
			width: 104rpx;
			height: 104rpx;
		}

	}

	.opacity_bg_box {
		position: relative;
	}

	// .opacity_bgcolor{
	// 	opacity: 0.4;
	// }
	// .opacity_bg {
	// 	position: absolute;
	// 	z-index: 1;
	// 	background-color: rgba(255, 255, 255, 0.5);
	// }

	.ciropp {
		// width: 280rpx;
		box-sizing: border-box;
		padding: 5rpx 10rpx;
		border-radius: 25rpx;
		background: #FFEBBB;
		position: absolute;
		font-size: 20rpx !important;
		top: 35rpx;
		// left: -38rpx;
	}

	.ciropp::after {
		content: '';
		position: absolute;
		top: 100%;
		left: 63%;
		transform: translate(0%, -50%) rotate(-45deg);
		width: 15rpx;
		height: 15rpx;
		background: #FFEBBB;
	}

	// 游戏列表
	.game_list {
		display: flex;
		border-top: 1rpx solid #F3F3F3;
		box-sizing: border-box;
		padding: 26rpx 0;

		image {
			width: 134rpx;
			height: 134rpx;
		}

		.game_title {
			font-size: 32rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-around;

			.game_title_text {
				display: flex;
				align-items: center;

				image {
					width: 34rpx;
					height: 34rpx;
					margin-left: 10rpx;
				}
			}
		}

		.game_desc_box {
			display: flex;

			view {
				font-size: 22rpx;

				&:nth-child(1) {
					color: #fff;
				}

				&:nth-child(2) {
					color: #3A1208;
				}
			}

			.game_desc_type {
				position: relative;
				border-radius: 25rpx;
				background: #FFB400;
				box-sizing: border-box;
				padding: 8rpx 12rpx;

				text {
					position: relative;
					z-index: 1;
				}
			}

			.game_desc_text {
				background: #FFFBF2;
				border-radius: 25rpx;
				border-bottom-left-radius: 0;
				border-top-left-radius: 0;
				box-sizing: border-box;
				padding: 8rpx 12rpx;
			}

			.game_desc_type::after {
				content: '';
				position: absolute;
				bottom: 0;
				right: -17rpx;
				border-left: 20px solid transparent;
				border-right: 20px solid transparent;
				border-bottom: 20px solid #FFB400;
				z-index: 0;
			}
		}

		.btn_box {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			background: #FBC22D;
			border-radius: 50%;
			width: 120rpx;
			height: 120rpx;
			font-size: 32rpx;
			color: #fff;
			margin-left: auto;
		}
	}

	.first_list {
		border: 0;
	}

	//说明弹窗
	.pop_box {
		width: 654rpx;
		min-height: 622rpx;
		background: #fff;
		border-radius: 30rpx;
		box-sizing: border-box;
		padding: 40rpx;

		.pop_title {
			width: 200rpx;
			height: 44rpx;
			display: block;
			margin: 0 auto;
		}
	}

	.close_icon {
		width: 654rpx;
		display: flex;
		justify-content: center;
		margin-top: 40rpx;
	}

	.tab_box {
		display: flex;
		justify-content: center;
		margin: 35rpx 0;

		view {
			&:nth-child(1) {
				margin-right: 20rpx;
			}
		}

		.tab_item {
			color: #A3ACBF;
			background: #F7F8FC;
			border-radius: 30rpx;
			border: 1rpx solid #F7F8FC;
			box-sizing: border-box;
			padding: 8rpx 15rpx;
			font-size: 28rpx;
			line-height: 1;
		}

	}

	.tabActive {
		color: #2C2E3D !important;
		background: #FEEEBD !important;
		border: 1rpx solid #FDDB7B !important;
	}

	.tab_img {
		width: 382rpx;
		height: 382rpx;
		border-radius: 30rpx;
		display: block;
		margin: 0 auto;
	}
	.tab_video{
		width: 382rpx;
		height: 382rpx;
		border-radius: 30rpx;
		display: block;
		margin: 0 auto;
	}
</style>